<script setup lang="ts">
import TitleGroup from "@/components/FormRowTitle/index.vue";
import VChart from "@/views/monitor/server/components/VChart.vue";
import { ElMessageBox, ElNotification } from "element-plus";
import { RefreshLeft, Search, Plus, Grid } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import {
  getTradeRetailContract,
  addTradeRetailContract,
  editTradeRetailContract,
  delTradeRetailContract
} from "@/api/tradeRetailContract";
import {
  getTradeRetailPlanAll,
  getTradeRetailPlanMonthDetailByPlanId,
  getTradeRetailPlanTimeDetailByPlanIdMonthId,
  getTradeRetailPlanBaseDetailByPlanId,
  getTradeRetailPlanDetail
} from "@/api/tradeRetailPlan";
import fileList from "@/views/business/vppUser/vppFile.vue";
import { sortDict } from "@/utils/index";
const loading = ref(false);
const activeTwoName = ref("first");
const assessmentMethodDict = [
  {
    value: 0,
    label: "免考核"
  }
];
const timeTypeDict = [
  {
    value: 1,
    label: "峰"
  },
  {
    value: 2,
    label: "平"
  },
  {
    value: 3,
    label: "谷"
  }
];
const queryForm = reactive({
  data: {
    contractName: undefined,
    contractNumber: undefined
  }
});
// let pcs = new Array(24).fill(1).map((i, index) => {
//   return (Math.random() * (0.05 - 0.01) + 0.01).toFixed(2);
// });
const options = ref({
  dataZoom: [
    {
      show: true,
      type: "inside",
      start: 0,
      end: 100
    },
    {
      show: true,
      type: "slider",
      start: 0,
      end: 100
    }
  ],
  tooltip: {
    show: true,
    trigger: "axis",
    axisPointer: {
      type: "cross"
    }
  },
  xAxis: {
    type: "category",
    axisLabel: {
      //x轴文字的配置
      show: true
      // interval: 0,//使x轴文字显示全
    },
    boundaryGap: false,
    data: new Array(24).fill(1).map((i, index) => {
      return `${index > 9 ? index : "0" + index}:00`;
    })
  },
  yAxis: {
    type: "value",
    show: true,
    min: "dataMin",
    axisLine: {
      show: true // 显示Y轴线
    }
  },
  series: [
    {
      name: "价格",
      type: "line",
      showSymbol: false,
      smooth: true,
      data: []
    }
  ]
});
const options2 = ref({
  dataZoom: [
    {
      show: true,
      type: "inside",
      start: 0,
      end: 100
    },
    {
      show: true,
      type: "slider",
      start: 0,
      end: 100
    }
  ],
  legend: {
    show: true
  },
  tooltip: {
    show: true,
    trigger: "axis",
    axisPointer: {
      type: "cross"
    }
  },
  xAxis: {
    type: "category",
    axisLabel: {
      //x轴文字的配置
      show: true
      // interval: 0,//使x轴文字显示全
    },
    boundaryGap: false,
    data: new Array(24).fill(1).map((i, index) => {
      return `${index > 9 ? index : "0" + index}:00`;
    })
  },
  yAxis: {
    type: "value",
    show: true,
    axisLine: {
      show: true // 显示Y轴线
    }
  },
  series: [
    {
      name: "工作日曲线",
      type: "line",
      showSymbol: false,
      smooth: true,
      data: []
    },
    {
      name: "周六曲线",
      type: "line",
      showSymbol: false,
      smooth: true,
      data: []
    },
    {
      name: "周日曲线",
      type: "line",
      showSymbol: false,
      smooth: true,
      data: []
    },
    {
      name: "节假日曲线",
      type: "line",
      showSymbol: false,
      smooth: true,
      data: []
    }
  ]
});
const statusDict = [
  {
    value: 0,
    label: "已签订未实施"
  },
  {
    value: 1,
    label: "以实施待结束"
  },
  {
    value: 2,
    label: "已结束"
  },
  {
    value: 3,
    label: "终止"
  }
];
const priceTypeDict = [
  {
    value: 1,
    label: "封平谷固定交易价格模式"
  },
  {
    value: 2,
    label: "全天固定交易价格模式"
  }
];
const contractTypeDict = [
  {
    value: 1,
    label: "年度双边协商交易"
  },
  {
    value: 2,
    label: "月度双边协商交易"
  },
  {
    value: 3,
    label: "月内双边协商交易"
  },
  {
    value: 4,
    label: "年度集中竞价交易"
  },
  {
    value: 5,
    label: "月度集中竞价交易"
  },
  {
    value: 6,
    label: "月内集中竞价交易"
  },
  {
    value: 7,
    label: "月度挂牌交易"
  },
  {
    value: 8,
    label: " 月内挂牌交易"
  },
  {
    value: 9,
    label: "月度滚动撮合交易"
  }
];
const planList = ref([]);
const tableColums = [
  {
    id: 1,
    label: "合同编号",
    key: "contractNumber",
    prop: "contractNumber",
    width: "200px",
    align: "center"
  },
  {
    id: 2,
    label: "甲方（售电公司/电力用户）",
    key: "electricityConsumer",
    prop: "electricityConsumer",
    width: "300px",
    align: "center"
  },
  {
    id: 3,
    label: "乙方（发电企业）",
    key: "electricitySupplier",
    prop: "electricitySupplier",
    width: "200px",
    align: "center"
  },
  {
    id: 4,
    label: "丙方（电网企业：默认为山东电力交易市场）",
    key: "electricityGrid",
    prop: "electricityGrid",
    width: "400px",
    align: "center"
  },
  {
    id: 17,
    label: "合同电量",
    key: "electricityCount",
    prop: "electricityCount",
    width: "400px",
    align: "center"
  },
  {
    id: 5,
    label: "签订日期",
    key: "dateOfSigning",
    prop: "dateOfSigning",
    width: "200px",
    align: "center"
  },
  {
    id: 6,
    label: "生效日期",
    key: "effectiveDate",
    prop: "effectiveDate",
    width: "200px",
    align: "center"
  },
  {
    id: 7,
    label: "生效年份（执行周期/年）",
    key: "effectiveYears",
    prop: "effectiveYears",
    width: "500px",
    align: "center"
  },
  {
    id: 8,
    label: "执行首日",
    key: "executionFirstDay",
    prop: "executionFirstDay",
    width: "200px",
    align: "center"
  },
  {
    id: 9,
    label: "终止日期",
    key: "expiryDate",
    prop: "expiryDate",
    width: "200px",
    align: "center"
  },
  {
    id: 10,
    label: "终止日期",
    key: "expiryDate",
    prop: "expiryDate",
    width: "200px",
    align: "center"
  },
  {
    id: 11,
    label: "执行终日",
    key: "executionEndDay",
    prop: "executionEndDay",
    width: "200px",
    align: "center"
  },
  {
    id: 12,
    label: "合同状态", //  0：已签订未实施，1：以实施待结束，2：已结束，3：终止
    key: "status",
    prop: "status",
    width: "200px",
    align: "center"
  },
  {
    id: 13,
    label: "价格模式", // （1：封平谷固定交易价格模式 2：全天固定交易价格模式）
    key: "priceType",
    prop: "priceType",
    width: "200px",
    align: "center"
  },
  {
    id: 14,
    label: "交易类型", // 对应附件7的10种类型
    key: "contractType",
    prop: "contractType",
    width: "200px",
    align: "center"
  },
  {
    id: 16,
    label: "备注信息",
    key: "remark",
    prop: "remark",
    width: "200px",
    align: "center"
  }
];
const dictFormat = (key, value, data) => {
  if (value || value === 0) {
    let item = data.find(i => parseInt(i.value) === parseInt(value));
    if (item) {
      return item.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
};
const dictList = reactive({
  data: {
    status: statusDict,
    priceType: priceTypeDict,
    contractType: contractTypeDict
  }
});
const search = async () => {
  pageObj.data.currentPage = 1;
  let res = await getData();
  tableData.data = res.content;
  pageObj.data.total = res.totalElements;
};
const getData = () => {
  loading.value = true;
  return new Promise<any>(async (resolve, reject) => {
    let data = await getTradeRetailContract({
      current: pageObj.data.currentPage,
      size: pageObj.data.pageSize,
      ...queryForm.data
    });
    loading.value = false;
    resolve(data);
  });
};
const dataDelRow = async row => {
  await delTradeRetailContract([row.id]);
};
const resetQuery = () => {
  queryForm.data = {
    contractName: undefined,
    contractNumber: undefined
  };
};
const pageObj = reactive({
  data: {
    currentPage: 1,
    pageSize: 10,
    total: 0
  }
});
const handleSizeChange = () => {
  search();
};
const handleCurrentChange = async () => {
  let res = await getData();
  tableData.data = res.content;
  pageObj.data.total = res.totalElements;
};
const tableData = reactive({
  data: []
});
const status = ref("add");
const edit = row => {
  title.value = "编辑零售合同";
  activeTwoName.value = "first";
  addDialog.value = true;
  status.value = "edit";
  form.data = JSON.parse(JSON.stringify(row));
};
const detailDialog = ref(false);
const look = row => {
  title.value = "查看零售合同";
  activeTwoName.value = "first";
  addDialog.value = true;
  status.value = "look";
  form.data = JSON.parse(JSON.stringify(row));
};
const activeName = ref("one");
const headerRowFunc = ({ row, rowIndex }) => {
  return "my-bg-blue";
};

const dTableData = reactive({
  data: []
});

const d2TableData = reactive({
  data: []
});
const allData = reactive({
  data: {
    "1": {},
    "2": {},
    "3": {},
    "4": {}
  }
});
const setBaseData = async () => {
  let res = await getTradeRetailPlanBaseDetailByPlanId({
    planId: activePlanId.value
  });
  let pcs = new Array(24).fill(1).map((i, index) => {
    return `${index > 9 ? index : "0" + index}:00:00`;
  });
  pcs.forEach(key => {
    allData.data["1"][key] = {
      value: null,
      label: ""
    };
    allData.data["2"][key] = {
      value: null,
      label: ""
    };
    allData.data["3"][key] = {
      value: null,
      label: ""
    };
    allData.data["4"][key] = {
      value: null,
      label: ""
    };
  });
  res.forEach(item => {
    allData.data[item.type + ""][item.time].value = item.dataVal;
    let assessmentMethodItem = assessmentMethodDict.find(
      i => i.value === item.assessmentMethod
    );
    if (assessmentMethodItem) {
      allData.data[item.type + ""][item.time].label =
        assessmentMethodItem.label;
    }
  });
  options2.value.series[0].data = pcs.map(
    item => allData.data["1"][item].value
  );
  options2.value.series[1].data = pcs.map(
    item => allData.data["2"][item].value
  );
  options2.value.series[2].data = pcs.map(
    item => allData.data["3"][item].value
  );
  options2.value.series[3].data = pcs.map(
    item => allData.data["4"][item].value
  );
};
const currentRow = ref(null);
const setTableTwoData = async () => {
  let res = await getTradeRetailPlanTimeDetailByPlanIdMonthId({
    planId: activePlanId.value,
    planMonthId: currentRow.value
  });
  d2TableData.data = sortDict(res, "no");
  options.value.series[0].data = d2TableData.data.map(item => {
    return item.price;
  });
};
const rowClick = row => {
  currentRow.value = row.id;
  setTableTwoData();
};

const activeId = ref(null);
const activePlanId = ref(null);
const setMonthData = async () => {
  let res = await getTradeRetailPlanMonthDetailByPlanId({
    planId: activePlanId.value
  });
  dTableData.data = sortDict(res, "no");
};
const activePlanData = ref({
  electricDeviation: "",
  nonExam: "",
  cancellationClause: "",
  applicableObject: ""
});
const getTcData = async () => {
  activePlanData.value = await getTradeRetailPlanDetail({
    id: activePlanId.value
  });
  qx2Data.data[0].col2 = activePlanData.value.minusDeviationExemScale + "%";
  qx2Data.data[0].col3 = activePlanData.value.minusDeviationExamRate + "%";
  qx2Data.data[1].col2 = activePlanData.value.plusDeviationExemScale + "%";
  qx2Data.data[1].col3 = activePlanData.value.plusDeviationExamRate + "%";
};
const activeHtData = ref({
  dateOfSigning: "",
  effectiveDate: "",
  effectiveYears: "",
  expiryDate: ""
});
const look2 = async row => {
  activeHtData.value = row;
  detailDialog.value = true;
  activeId.value = row.id;
  activePlanId.value = row.planId;
  getTcData();
  setMonthData();
  setBaseData();
};

const qxDialog = ref(false);
const qxData = reactive({
  data: []
});
const qx2Data = reactive({
  data: [
    {
      col1: "负偏差",
      col2: "",
      col3: ""
    },
    {
      col1: "正偏差",
      col2: "",
      col3: ""
    }
  ]
});
const setData = () => {
  let data = [];
  for (let j = 1; j <= 4; j++) {
    for (let i = 1; i <= 8; i++) {
      let item = {};
      if (j === 1) {
        item.col1 = "工作日曲线";
      }
      if (j === 2) {
        item.col1 = "周六曲线";
      }
      if (j === 3) {
        item.col1 = "周日曲线";
      }
      if (j === 4) {
        item.col1 = "节假日曲线";
      }
      item["col" + 3] =
        `${0 + 3 * (i - 1) > 9 ? 0 + 3 * (i - 1) : "0" + (0 + 3 * (i - 1))}:00:00`;
      item["col" + 6] =
        `${0 + 1 + 3 * (i - 1) > 9 ? 0 + 1 + 3 * (i - 1) : "0" + (0 + 1 + 3 * (i - 1))}:00:00`;
      item["col" + 9] =
        `${0 + 2 + 3 * (i - 1) > 9 ? 0 + 2 + 3 * (i - 1) : "0" + (0 + 2 + 3 * (i - 1))}:00:00`;
      item["col" + 4] = allData.data[j + ""][item["col" + 3]].value;
      item["col" + 7] = allData.data[j + ""][item["col" + 6]].value;
      item["col" + 10] = allData.data[j + ""][item["col" + 9]].value;
      item["col" + 5] = allData.data[j + ""][item["col" + 3]].label;
      item["col" + 8] = allData.data[j + ""][item["col" + 6]].label;
      item["col" + 11] = allData.data[j + ""][item["col" + 9]].label;
      data.push(item);
    }
  }
  return data;
};
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex === 0) {
      return {
        rowspan: 8,
        colspan: 1
      };
    } else if (rowIndex === 8) {
      return {
        rowspan: 8,
        colspan: 1
      };
    } else if (rowIndex === 16) {
      return {
        rowspan: 8,
        colspan: 1
      };
    } else if (rowIndex === 24) {
      return {
        rowspan: 8,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
};

const showNextDialog = () => {
  qxDialog.value = true;
  qxData.data = setData();
};
const form = reactive({
  data: {
    contractNumber: undefined,
    contractName: undefined,
    electricityConsumer: undefined,
    electricitySupplier: undefined,
    electricityCount: undefined,
    electricityGrid: "山东电力交易市场",
    dateOfSigning: undefined,
    executionFirstDay: undefined,
    executionEndDay: undefined,
    effectiveDate: undefined,
    expiryDate: undefined,
    effectiveYears: undefined,
    priceType: undefined,
    remark: undefined,
    contractType: undefined,
    planId: undefined
  },
  rules: {
    contractNumber: [
      { required: true, message: "请输入合同编号", trigger: "blur" }
    ],
    contractName: [
      { required: true, message: "请输入合同名称", trigger: "blur" }
    ],
    electricityConsumer: [
      { required: true, message: "请输入甲方名称", trigger: "blur" }
    ],
    electricitySupplier: [
      { required: true, message: "请输入乙方名称", trigger: "blur" }
    ],
    electricityGrid: [
      { required: true, message: "请输入丙方名称", trigger: "blur" }
    ],
    electricityCount: [
      { required: true, message: "请输入合同电量", trigger: "change" }
    ],
    effectiveYears: [
      { required: true, message: "请输入生效年份", trigger: "blur" }
    ],
    dateOfSigning: [
      { required: true, message: "请选择签订日期", trigger: "change" }
    ],
    executionFirstDay: [
      { required: true, message: "请选择执行首日", trigger: "change" }
    ],
    executionEndDay: [
      { required: true, message: "请选择执行终日", trigger: "change" }
    ],
    effectiveDate: [
      { required: true, message: "请选择生效日期", trigger: "change" }
    ],
    expiryDate: [
      { required: true, message: "请选择终止日期", trigger: "change" }
    ],
    priceType: [
      { required: true, message: "请选择价格模式", trigger: "change" }
    ],
    contractType: [
      { required: true, message: "请选择交易类型", trigger: "change" }
    ],
    planId: [{ required: true, message: "请选择零售套餐", trigger: "change" }]
  }
});
const del = row => {
  ElMessageBox.confirm("是否确认删除该零售合同?", "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    await dataDelRow(row);
    search();
    ElNotification({
      title: "系统提示",
      message: "删除成功",
      type: "success"
    });
  });
};
const formRules = ref(null);
const addDialog = ref(false);
const title = ref("创建零售合同");

const add = () => {
  title.value = "创建零售合同";
  activeTwoName.value = "first";
  addDialog.value = true;
  status.value = "add";
};
// const exportData = async () => {
//   await downTradeRetailContract({...queryForm.data})
// }
const cancel = () => {
  form.data = {
    contractNumber: undefined,
    contractName: undefined,
    electricityConsumer: undefined,
    electricitySupplier: undefined,
    electricityCount: undefined,
    electricityGrid: "山东电力交易市场",
    dateOfSigning: undefined,
    executionFirstDay: undefined,
    executionEndDay: undefined,
    effectiveDate: undefined,
    expiryDate: undefined,
    effectiveYears: undefined,
    priceType: undefined,
    remark: undefined,
    contractType: undefined,
    planId: undefined
  };
  setTimeout(() => {
    formRules.value && formRules.value.clearValidate();
    addDialog.value = false;
  }, 0);
};
const subLoading = ref(false);
const submit = () => {
  subLoading.value = true;
  formRules.value.validate(async valid => {
    if (valid) {
      if (status.value === "add") {
        await addTradeRetailContract(form.data);
        ElNotification({
          title: "系统提示",
          message: "零售合同创建成功",
          type: "success"
        });
      } else {
        await editTradeRetailContract(form.data);
        ElNotification({
          title: "系统提示",
          message: "零售合同修改成功",
          type: "success"
        });
      }
      search();
      cancel();
    }
    subLoading.value = false;
  });
};
const init = async () => {
  planList.value = await getTradeRetailPlanAll();
  search();
};
const beforeClose = async d => {
  await cancel();
  d();
};
const detailClose = () => {
  currentRow.value = null;
  activeName.value = "one";
};
const detailDialogBeforeClose = async d => {
  detailClose();
  d();
};
const checkAll = ref(true);
const isIndeterminate = ref(false);
const checkedCities = ref([]);
const defaultColums = reactive({
  data: []
});
const colums = reactive({
  data: []
});
onMounted(() => {
  defaultColums.data = tableColums;
  colums.data = tableColums;
  init();
  checkedCities.value = colums.data.map(item => item.prop);
});
const queryShow = ref(true);
const getList = () => {
  search();
};

const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? defaultColums.data.map(item => item.prop) : [];
  isIndeterminate.value = false;
  if (checkedCities.value.length) {
    colums.data = defaultColums.data;
  } else {
    colums.data = [];
  }
};
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === defaultColums.data.length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < defaultColums.data.length;
  let cols = [];
  defaultColums.data.forEach(i => {
    if (value.indexOf(i.prop) > -1) {
      cols.push(i);
    }
  });
  colums.data = cols;
};
</script>

<template>
  <div class="main h-[calc(100%-29px)]">
    <el-card v-loading="loading" class="w-full my-card-full">
      <el-row v-if="queryShow">
        <el-form :inline="true" :model="queryForm.data" label-width="0px">
          <el-form-item>
            <el-input
              v-model="queryForm.data.contractName"
              placeholder="请输入合同名称查询"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="queryForm.data.contractNumber"
              placeholder="请输入合同编号查询"
            />
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-date-picker-->
          <!--              v-model="queryForm.data.dateOfSigning"-->
          <!--              type="daterange"-->
          <!--              range-separator=":"-->
          <!--              start-placeholder="合同签订日期段"-->
          <!--              end-placeholder="结束日期"-->
          <!--              value-format="YYYY-MM-DD"-->
          <!--            />-->
          <!--          </el-form-item>-->
          <el-form-item class="ml-[10px]">
            <el-button type="primary" :icon="Search" @click="search"
              >查询</el-button
            >
            <el-button :icon="RefreshLeft" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="w-full flex justify-between mb-[10px]">
        <div class="buttons flex align-center">
          <el-button type="primary" :icon="Plus" @click="add">新增</el-button>
          <!--                    <el-button-->
          <!--                      type="success"-->
          <!--                      :icon="Edit"-->
          <!--                      :disabled="!(multipleSelection.length === 1)"-->
          <!--                      @click="editSelect"-->
          <!--                    >修改</el-button-->
          <!--                    >-->
          <!--                    <el-button-->
          <!--                      type="danger"-->
          <!--                      :icon="Delete"-->
          <!--                      :disabled="!multipleSelection.length"-->
          <!--                      @click="delSelect"-->
          <!--                    >删除</el-button-->
          <!--                    >-->
          <!--                      <el-button type="warning" :icon="Download" @click="exportData"-->
          <!--                        >导出</el-button-->
          <!--                      >-->
        </div>
        <div class="settings">
          <el-button-group class="ml-4">
            <el-button
              type="primary"
              :icon="Search"
              @click="queryShow = !queryShow"
            />
            <el-button type="primary" :icon="RefreshLeft" @click="getList" />
            <el-popover placement="bottom" :width="200" trigger="click">
              <template #reference>
                <el-button type="primary" :icon="Grid" />
              </template>
              <el-checkbox
                v-model="checkAll"
                :indeterminate="isIndeterminate"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
              <div class="group-box w-full max-h-[240px] overflow-y-auto">
                <el-checkbox-group
                  v-model="checkedCities"
                  class="columns-show-group"
                  @change="handleCheckedCitiesChange"
                >
                  <el-checkbox
                    v-for="item in defaultColums.data"
                    :key="item.prop"
                    :label="item.prop"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </el-popover>
          </el-button-group>
        </div>
      </div>
      <div class="w-full">
        <el-table :data="tableData.data" width="100%">
          <el-table-column
            v-for="item in colums.data"
            :key="item.id"
            :label="item.label"
            :prop="item.key"
            :width="item.width"
            :align="item.align"
          >
            <template
              v-if="
                ['status', 'priceType', 'contractType'].indexOf(item.prop) > -1
              "
              #default="scope"
            >
              <span>{{
                dictFormat(
                  item.prop,
                  scope.row[item.prop],
                  dictList.data[item.prop]
                )
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="320px"
            :fixed="'right'"
            label="操作"
            align="center"
          >
            <template #default="scope">
              <el-button text type="primary" @click="look(scope.row)"
                >查看</el-button
              >
              <el-button text type="primary" @click="look2(scope.row)"
                >套餐信息</el-button
              >
              <el-button text type="primary" @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button text type="primary" @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page w-full mt-[10px]">
        <el-pagination
          v-model:current-page="pageObj.data.currentPage"
          v-model:page-size="pageObj.data.pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageObj.data.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      v-model="addDialog"
      :before-close="beforeClose"
      :title="title"
      width="60%"
      :close-on-click-modal="false"
    >
      <div class="w-full">
        <el-tabs
          v-if="status !== 'add'"
          v-model="activeTwoName"
          class="demo-tabs"
        >
          <el-tab-pane label="合同信息" name="first" />
          <el-tab-pane label="附件" name="second" />
        </el-tabs>
        <el-form
          v-if="activeTwoName === 'first'"
          ref="formRules"
          class="display-block"
          :model="form.data"
          label-width="90px"
          :rules="form.rules"
          :disabled="status === 'look'"
        >
          <TitleGroup title="合同基础信息">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="合同编号" prop="contractNumber">
                  <el-input
                    v-model="form.data.contractNumber"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同名称" prop="contractName">
                  <el-input
                    v-model="form.data.contractName"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同电量" prop="electricityCount">
                  <el-input-number
                    v-model="form.data.electricityCount"
                    placeholder="请输入"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="签订日期" prop="dateOfSigning">
                  <el-date-picker
                    v-model="form.data.dateOfSigning"
                    type="date"
                    placeholder="请选择"
                    value-format="YYYY-MM-DD"
                    date-format="YYYY-MM-DD"
                    :size="'default'"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生效日期" prop="effectiveDate">
                  <el-date-picker
                    v-model="form.data.effectiveDate"
                    type="date"
                    placeholder="请选择"
                    value-format="YYYY-MM-DD"
                    date-format="YYYY-MM-DD"
                    :size="'default'"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执行首日" prop="executionFirstDay">
                  <el-date-picker
                    v-model="form.data.executionFirstDay"
                    type="date"
                    placeholder="请选择"
                    value-format="YYYY-MM-DD"
                    date-format="YYYY-MM-DD"
                    :size="'default'"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="终止日期" prop="expiryDate">
                  <el-date-picker
                    v-model="form.data.expiryDate"
                    type="date"
                    placeholder="请选择"
                    value-format="YYYY-MM-DD"
                    date-format="YYYY-MM-DD"
                    :size="'default'"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执行终日" prop="executionEndDay">
                  <el-date-picker
                    v-model="form.data.executionEndDay"
                    type="date"
                    placeholder="请选择"
                    value-format="YYYY-MM-DD"
                    date-format="YYYY-MM-DD"
                    :size="'default'"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生效年份" prop="effectiveYears">
                  <el-input
                    v-model="form.data.effectiveYears"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="价格模式" prop="priceType">
                  <el-select v-model="form.data.priceType" placeholder="请选择">
                    <el-option
                      v-for="item in dictList.data.priceType"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="交易类型" prop="contractType">
                  <el-select
                    v-model="form.data.contractType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in dictList.data.contractType"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="零售套餐" prop="planId">
                  <el-select v-model="form.data.planId" placeholder="请选择">
                    <el-option
                      v-for="item in planList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注信息" prop="remark">
                  <el-input
                    v-model="form.data.remark"
                    type="textarea"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </TitleGroup>
          <TitleGroup title="甲乙丙方信息">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="甲方" prop="electricityConsumer">
                  <el-input
                    v-model="form.data.electricityConsumer"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乙方" prop="electricitySupplier">
                  <el-input
                    v-model="form.data.electricitySupplier"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="丙方" prop="electricityGrid">
                  <el-input
                    v-model="form.data.electricityGrid"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </TitleGroup>
        </el-form>
        <div v-if="status !== 'add' && activeTwoName === 'second'">
          <fileList
            :active-vpp-user-id="form.data.id"
            :handle-status="status"
            :module-type="'trade_retail_contract'"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button v-if="status === 'look'" @click="cancel">关闭</el-button>
          <el-button v-if="status !== 'look'" @click="cancel">取消</el-button>
          <el-button
            v-if="status !== 'look'"
            :loading="subLoading"
            type="primary"
            @click="submit"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="detailDialog"
      :before-close="detailDialogBeforeClose"
      title="详细信息"
      width="60%"
      :close-on-click-modal="false"
      top="5vh"
    >
      <div class="w-full">
        <!--        <div class="py-[15px] flex justify-center items-center">-->
        <!--          <span class="mr-[10px]">济宁正大电力有限公司分时价格0058</span>-->
        <!--          <el-tag class="mr-[10px]">12个月</el-tag>-->
        <!--          <el-tag>2024年</el-tag>-->
        <!--        </div>-->
        <div>
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="合同信息" name="one">
              <div class="p-[20px]">
                <div class="text-[#0076c0] text-[16px] mt-[20px] mb-[10px]">
                  签订日期
                </div>
                <div>{{ activeHtData.dateOfSigning || "" }}</div>
                <div class="text-[#0076c0] text-[16px] mt-[20px] mb-[10px]">
                  生效日期
                </div>
                <div>{{ activeHtData.effectiveDate || "" }}</div>
                <div class="text-[#0076c0] text-[16px] mt-[20px] mb-[10px]">
                  生效年份
                </div>
                <div>{{ activeHtData.effectiveYears || "" }}</div>
                <div class="text-[#0076c0] text-[16px] mt-[20px] mb-[10px]">
                  终止日期
                </div>
                <div>{{ activeHtData.expiryDate || "" }}</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="价格形成方式" name="first" />
            <el-tab-pane label="基准曲线偏差" name="second" />
            <el-tab-pane label="申报电量偏差" name="third">
              <div class="p-[20px]">
                <div class="text-[#0076c0] text-[16px] mt-[20px] mb-[10px]">
                  申报电量偏差
                </div>
                <div>{{ activePlanData.electricDeviation || "" }}</div>
                <div class="text-[#0076c0] text-[16px] mt-[20px] mb-[10px]">
                  条件门槛偏差
                </div>
                <div>无条件门槛偏差</div>
                <div class="text-[#0076c0] text-[16px] mt-[20px] mb-[10px]">
                  免考核机制
                </div>
                <div>{{ activePlanData.nonExam || "" }}</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="解约条款" name="fourth">
              <div class="p-[20px]">
                <div class="text-[#0076c0] text-[16px] mt-[20px] mb-[10px]">
                  解约条款
                </div>
                <div>{{ activePlanData.cancellationClause || "" }}</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="适用对象" name="five">
              <div class="p-[20px]">
                <div class="text-[#0076c0] text-[16px] mt-[20px] mb-[10px]">
                  适用对象
                </div>
                <div>{{ activePlanData.applicableObject || "" }}</div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div v-if="activeName === 'first'">
            <div class="text-[#0076c0] text-[16px]">分时价格</div>
            <div class="py-[15px]">
              <span>月段配置：</span>
              <span class="text-[#97d491]">点击月段显示对应时段数</span>
            </div>
            <div class="flex justify-center">
              <div class="w-[600px]">
                <el-table
                  :current-row-key="currentRow"
                  highlight-current-row
                  row-key="id"
                  :header-row-class-name="headerRowFunc"
                  width="600px"
                  border
                  :data="dTableData.data"
                  @row-click="rowClick"
                >
                  <el-table-column
                    width="200px"
                    align="center"
                    prop="no"
                    label="序号"
                    sortable
                  />
                  <el-table-column
                    width="200px"
                    align="center"
                    prop="startMonth"
                    label="开始月"
                    sortable
                  />
                  <el-table-column
                    width="200px"
                    align="center"
                    prop="endMonth"
                    label="结束月"
                    sortable
                  />
                </el-table>
              </div>
            </div>
            <div class="py-[15px]">
              <span>时段配置：</span>
            </div>
            <div class="flex justify-center">
              <div class="w-[800px]">
                <el-table
                  :header-row-class-name="headerRowFunc"
                  width="800px"
                  border
                  :data="d2TableData.data"
                >
                  <el-table-column
                    width="130px"
                    align="center"
                    prop="no"
                    label="时段数"
                    sortable
                  />
                  <el-table-column
                    width="180px"
                    align="center"
                    prop="startTime"
                    label="开始时间"
                    sortable
                  />
                  <el-table-column
                    width="180px"
                    align="center"
                    prop="endTime"
                    label="结束时间"
                    sortable
                  />
                  <el-table-column
                    width="180px"
                    align="center"
                    prop="price"
                    label="价格(元/千瓦时)"
                    sortable
                  />
                  <el-table-column
                    width="130px"
                    align="center"
                    prop="timeType"
                    label="时段属性"
                    sortable
                  >
                    <template #default="scope">
                      <span>{{
                        dictFormat("timeType", scope.row.timeType, timeTypeDict)
                      }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="py-[15px]">
              <span>24点价格曲线：</span>
            </div>
            <div class="flex justify-center">
              <div class="w-[600px] h-[300px]">
                <v-chart :options="options" />
              </div>
            </div>
          </div>
          <div v-if="activeName === 'second'">
            <div class="text-[#0076c0] text-[16px]">考核曲线</div>
            <div class="flex justify-center">
              <div class="w-[600px] h-[400px]">
                <v-chart :options="options2" />
              </div>
            </div>
            <div class="py-[15px]">
              <span class="text-[red]">无基准曲线偏差 - </span>
              <span
                class="text-[#1890ff] hover:cursor-pointer"
                @click="showNextDialog"
                >点击查看曲线详情</span
              >
            </div>
            <div class="w-[600px]">
              <el-table
                :header-row-class-name="headerRowFunc"
                border
                :data="qx2Data.data"
              >
                <el-table-column
                  align="center"
                  prop="col1"
                  label="偏差类别"
                  sortable
                />
                <el-table-column
                  align="center"
                  prop="col2"
                  label="免考核比例"
                  sortable
                />
                <el-table-column
                  align="center"
                  prop="col3"
                  label="考核费率或价格"
                  sortable
                />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-model="qxDialog"
      title="曲线详情"
      width="60%"
      :close-on-click-modal="false"
      top="5vh"
    >
      <div class="text-[#0076c0] text-[16px]">基准曲线：</div>
      <div>
        <el-table
          :header-row-class-name="headerRowFunc"
          border
          :data="qxData.data"
          :span-method="objectSpanMethod"
        >
          <el-table-column
            align="center"
            prop="col1"
            label="曲线类型"
            sortable
          />
          <el-table-column align="center" prop="col2" label="曲线信息">
            <el-table-column align="center" prop="col3" label="时段" />
            <el-table-column align="center" prop="col4" label="用电量比例" />
            <el-table-column align="center" prop="col5" label="考核方式" />
            <el-table-column align="center" prop="col6" label="时段" />
            <el-table-column align="center" prop="col7" label="用电量比例" />
            <el-table-column align="center" prop="col8" label="考核方式" />
            <el-table-column align="center" prop="col9" label="时段" />
            <el-table-column align="center" prop="col10" label="用电量比例" />
            <el-table-column align="center" prop="col11" label="考核方式" />
          </el-table-column>
        </el-table>
      </div>
      <div class="text-[#0076c0] text-[16px] py-[15px]">基准曲线偏差：</div>
      <div class="w-[600px]">
        <el-table
          :header-row-class-name="headerRowFunc"
          border
          :data="qx2Data.data"
        >
          <el-table-column
            align="center"
            prop="col1"
            label="偏差类别"
            sortable
          />
          <el-table-column
            align="center"
            prop="col2"
            label="免考核比例"
            sortable
          />
          <el-table-column
            align="center"
            prop="col3"
            label="考核费率或价格"
            sortable
          />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.my-card-full {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .demo-tabs {
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: hidden;

      .el-tabs__content {
        flex: 1;

        .el-tab-pane {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

:deep(.my-bg-blue) {
  th.el-table__cell {
    color: #fff;
    background-color: #0076c0;
  }
}

:deep(.el-table thead.is-group th.el-table__cell) {
  color: #fff;
  background-color: #0076c0;
}
</style>
